<!DOCTYPE html>
<!--产品详情页-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>产品详情页</title>
    <link rel="stylesheet" type="text/css" href="../userResource/css/productdetail.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/item.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/login.css">
    <link rel="stylesheet" type="text/css" href="../vendors/myself/city.css">
    <link rel="stylesheet" type="text/css" href="../vendors/myself/floatPanel.min.css">
    <style>
        .otherPage {
            height: 100%;
            min-height: 100px;
            max-height: 1000px;
            width: 100%;
            margin-bottom: 100px;
        }

        .page {
            width: 100%;
        }
    </style>
<body style="text-align: left;">

<!-- 头信息 -->
<div id="header"></div>

<!-- 右侧悬浮条 -->
<div class="fixed_bar">
    <dl>
        <dd class="center">
            <a href="javascript:void(0);" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" class="needLogin">个人中心</a></p>
        </dd>
        <dd class="my_like">
            <a href="favorite.html" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" class="needLogin">我的关注</a></p>
        </dd>
        <dd class="fixed_cart_tip">
            <a href="shoppingcart.html"><span><i></i>购物车<font class="cartNum">0</font></span></a>
        </dd>
        <dd class="online">
            <a href="javascript:void(0);" target="_blank" class="needLogin"><span></span></a>
            <p class="tip"><a href="javascript:void(0);" target="_blank" class="needLogin">在线客服</a></p>
        </dd>
    </dl>
    <p class="go_top" title="Scroll Back to Top" style="opacity: 0;"><a href="javascript:void(0)"><span></span></a></p>
</div>

<!-- 面包屑导航 -->
<div class="nav_bar">
    <div class="wrap">
        您现在的位置：
        <a href="index.html">首页</a>
        &gt; <a href="#" id="second-title-name"></a>
        &gt; <a href="#" id="title-name"></a>
    </div>
</div>
<!-- 商品细节 -->
<input id="isSkuProduct" type="hidden" value="true">
<input id="productId" type="hidden" value="360">
<input id="skuId" type="hidden" value="1027">
<div class="goods_detail">
    <div class="wrap cf">
        <div class="gallery f_left" id="pic">

        </div>
        <div class="property f_left">
            <div id="pro">

            </div>

            <table>
                <tbody id="attvalue">
                <tr>
                    <th>运费：</th>
                    <td>
                        <div class="meta">
                            <span class="from">北京</span>至
                            <span class="to"><input class="input" name="" id="city" type="text" placeholder="请选择"
                                                    autocomplete="off" readonly="true" style="border-style:none"><s></s></span>
                            <font>快递：<span class="shippingFee">￥0.00</span></font>

                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="btns">
                <a href="javascript:void(0)" class="buy btn_buy" onclick="buyImmdiately()">立即购买</a>
                <a href="javascript:void(0)" class="add btn_addCart needLogin" id="addToCard"><span></span>加入购物车</a>
            </div>
        </div>
    </div>
</div>
<!-- 套餐 -->
<!-- 介绍 -->
<div class="presentation">
    <div class="wrap cf">
        <!-- 猜你喜欢 -->
        <div class="guess_like f_left">
            <dl>
                <dt>猜你喜欢</dt>
                <dd>
                    <a href="#" target="_blank"><img
                            src="../userResource/images/productdetail/aa558b1778a04eaf9e4d3dddb32d9d3f_120.jpg"
                            alt="DOTA2- T恤 烫金拍拍" title="DOTA2- T恤 烫金拍拍"></a>
                    <p class="name ellipsis" title="DOTA2- T恤 烫金拍拍"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2- T恤 烫金拍拍</p>
                    <p class="price">¥139.00</p>
                </dd>
                <dd>
                    <a href="#" target="_blank"><img
                            src="../userResource/images/productdetail/93945894-d9c6-4f43-91cc-76203c9893d8_120.jpg"
                            alt="DOTA2-TI7 装甲就位 T恤" title="DOTA2-TI7 装甲就位 T恤"></a>
                    <p class="name ellipsis" title="DOTA2-TI7 装甲就位 T恤"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2-TI7 装甲就位 T恤</p>
                    <p class="price">¥139.00</p>
                </dd>
                <dd>
                    <a href="#" target="_blank"><img
                            src="../userResource/images/productdetail/d9cde1a175234cb8b4032fcc4d55aa34_120.jpg"
                            alt="DOTA2-2018年国际邀请赛 卫衣" title="DOTA2-2018年国际邀请赛 卫衣"></a>
                    <p class="name ellipsis" title="DOTA2-2018年国际邀请赛 卫衣"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2-2018年国际邀请赛 卫衣</p>
                    <p class="price">¥499.00</p>
                </dd>
                <dd>
                    <a href="#" target="_blank"><img
                            src="../userResource/images/productdetail/042cbcd654af4bb69fd885d0d6e9d0ca_120.jpg"
                            alt="DOTA2-2018年国际邀请赛 主题马克杯" title="DOTA2-2018年国际邀请赛 主题马克杯"></a>
                    <p class="name ellipsis" title="DOTA2-2018年国际邀请赛 主题马克杯"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2-2018年国际邀请赛 主题马克杯</p>
                    <p class="price">¥118.00</p>
                </dd>
                <dd>
                    <a href="#" target="_blank"><img
                            src="../userResource/images/productdetail/5997b704-37e9-42e0-9ae1-641913e0074e_120.jpg"
                            alt="DOTA2-潮汐猎人 马克杯" title="DOTA2-潮汐猎人 马克杯"></a>
                    <p class="name ellipsis" title="DOTA2-潮汐猎人 马克杯"
                       style="word-wrap: break-word; word-break: break-all;">DOTA2-潮汐猎人 马克杯</p>
                    <p class="price">¥188.00</p>
                </dd>
            </dl>
        </div>
        <!-- 详情 -->
        <div class="product_detail details f_left">
            <ul class="cf details_nav desc_tab">
                <li class="curr"><a href="javascript:void(0)">商品介绍</a></li>
                <li><a href="javascript:void(0)">产品评论<span>(0)</span></a></li>
            </ul>
            <div class="desc_pane cf">
                <div class="content cf"><p><a href="#" target="_blank"></a></p>
                    <p><img src="../userResource/images/productdetail/1502872462844018121.jpg"
                            title="1502872462844018121.jpg" alt="1.jpg" style="float: left;"></p>
                    <p><img src="../userResource/images/productdetail/1500317854934064890.jpg" style=""
                            title="1500317854934064890.jpg"></p>
                    <p><br></p></div>
                <div class="content cf" style="display: none;">
                    <div class="comment">
                        <div class="cf rate_header">
                            <div class="f_left rate_score">
                                <p class="num">
                                    0%
                                </p>
                                <p class="stars stars2"></p>
                                <span>好评度</span>
                            </div>
                            <div class="f_left rate_bar">
                                <table cellspacing="0" cellpadding="0">
                                    <tbody>
                                    <tr>
                                        <th>好评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    <tr>
                                        <th>中评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    <tr>
                                        <th>差评(0%)</th>
                                        <td><p><span style="width:0%"></span></p></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <dl class="cf f_right">
                                <dt class="f_left">买家印象：</dt>
                                <dd class="f_left">

                                    <a href="javascript:void(0)">TI7周边(0)</a>

                                </dd>
                            </dl>
                        </div>
                        <div class="rate_toolbar">
                            <a data-type="0" href="javascript:void(0)" class="curr">全部评价（<span>0</span>）</a>
                            <a data-type="4" href="javascript:void(0)">晒图（<span>0</span>）</a>
                            <a data-type="1" href="javascript:void(0)">好评（<span>0</span>）</a>
                            <a data-type="3" href="javascript:void(0)">中评（<span>0</span>）</a>
                            <a data-type="2" href="javascript:void(0)">差评（<span>0</span>）</a>
                        </div>
                        <div class="comment_list">

                            <div class="page" data-page-count="0" data-page-num="0" data-page-size="10"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- iframe -->
<div class="otherPage">
    <!--底部footer-->
    <iframe style="height: 550px" class="page" src="footer.html" scrolling="no" frameborder="no"></iframe>
</div>

<script type="text/javascript">
    var pid;
    var kuid;
    var tprice = 0;
    var cid;
    var price = 0;
</script>
<!--jquery-->
<script type="text/javascript" src="../vendors/jquery/dist/jquery.js"></script>
<!--自己的js文件-->
<script type="text/javascript" src="../vendors/myself/myself.js"></script>
<script type="text/javascript" src="../vendors/myself/init.js"></script>
<script type="text/javascript" src="../vendors/myself/Popt.js"></script>
<script type="text/javascript" src="../vendors/myself/city.json.js"></script>
<script type="text/javascript" src="../vendors/myself/citySet.js"></script>
<script type="text/javascript" src="../vendors/myself/floatPanel.min.js"></script>

<!-- 初始化加载页面 -->
<script type="text/javascript">
    var panel = FloatPanel('提示');
    panel.set({
        header: {
            content: "提示",
        },
        body: {content: '已经添加到购物车'},
        footer: {enabled: false},
        floatHeight: 20,
        width: 228,
    });
    $(function () {
        $('#header').load('header.html');
        //通用参数获取
        pid = getUrlParam("pid");
        cid = getUrlParam("cid");


        $.ajax({
            type: "GET",
            url: "/product/getAllPicAndMainPicBypid",
            dataType: "json",
            data: "pid=" + pid,
            success: function (data) {
                // console.log(data);
                var pic = $('#pic');
                pic.empty();
                var str1 = '';
                str1 += '<div class="picFocus">' +
                    '               <div class="bd">' +
                    '                    <div class="tempWrap" style="overflow:hidden; position:relative; width:430px">' +
                    '                        <ul style="width: 430px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: 0px;">' +
                    '                            <li style="float: left; width: 430px;" id="img">' +
                    '                            </li>' +
                    '                        </ul>' +
                    '                    </div>' +
                    '                </div>' +
                    '                <div class="hd">' +
                    '                    <ul id="imgs">' +
                    '                    </ul>' +
                    '                </div>' +
                    '            </div>' +
                    '            <div class="share">' +
                    '                <dl class="cf">' +
                    '                    <dt class="f_left" id="a1"></dt>' +
                    '                </dl>' +
                    '            </div>';
                pic.append(str1);

                var img = $('#img');
                var str2 = "<img src='" + data.rows.product.imgurl + "' width='430' height='430'></img>";
                img.append(str2);

                var imgs = $('#imgs');
                var pictures = data.rows.productpicList;
                var str3 = '';
                $.each(pictures, function (i, picture) {
                    str3 += "<li class='on'><img src='" + picture.picurl + "'width='100' height='100'></img></li>";
                });
                imgs.append(str3);

                var a1 = $('#a1');
                var str4 = '<a href="javascript:void(0)" onclick="addHeart()" data-pid="360" class="like" name="ac"><span></span>关注<font id="f1">0</font></a>';
                a1.append(str4);
                $('#f1').html(data.rows.product.pheart);
            }
        });
    });

    // 地址下拉
    $("#city").click(function (e) {
        SelCity(this, e);
    });
    $("s").click(function (e) {
        SelCity(document.getElementById("city"), e);
    });

    $(function () {
        $.ajax({
            url: "/product/getProduct",
            type: "GET",
            dataType: "json",
            data: "pid=" + pid,
            success: function (data) {
                var pro = $('#pro');
                pro.empty();
                /*console.log(data.rows.pname);*/
                var str = '<div class="title"><h1 id="h11"></h1><p id="p11"></p></div><p id="productShowPrice" class="price"></p>';
                pro.append(str);
                $('#title-name').html(data.rows.pname);
                $('#h11').html(data.rows.pname);
                $('#p11').html(data.rows.ppoint);
                $('#productShowPrice').html("￥" + data.rows.price);
                price = parseInt(data.rows.price);
            }
        });
        $.ajax({
            url: "/categery/selectByCid",
            type: 'GET',
            data: "cid=" + cid,
            success: function (data) {
                $('#second-title-name').attr('href', "productList.html?cname=" + data.rows);
                $('#second-title-name').html(data.rows);
            }
        })
    });

    var a;
    $(function () {
        $.ajax({
            url: "/product/getKuidAndAttAndAttvalueByPidCid",
            type: "GET",
            dataType: "json",
            data: {
                pid: pid,
                cid: cid
            },
            success: function (data) {
                a = data.rows.aid;
                var attvalue = $('#attvalue');
                /*attvalue.empty();*/
                var str = "";
                //属性
                str += '<tr><td colspan="2">' +
                    '<table style="margin-left: -4px;" id="product_sku_table">' +
                    '<tbody ><tr><th id="h22"></th><td id="arr"></td></tbody>' +
                    '</table></td></tr>';
                //库存
                str += '<tr><th>数量：</th>' +
                    '<td><span class="amount number-input"><span class="reduce disable" onclick="reduceNum()"></span><input id="buyNumber" type="text" value="1" min="1" stock="32" maxlength="3" autocomplete="off"><span class="plus" onclick="plusNum()"></span></span>' +
                    '<span class="stock stock_info">（库存<font id="stock_num">1</font>件）</span>' +
                    '<span class="sold">已售出<font id="sold_num">20</font>件</span>' +
                    '</td>';

                attvalue.append(str);
                // console.log(data.rows);
                $('#h22').html(data.rows.aname + "：");
                $('#stock_num').html(data.rows.totalstore);
                var array = data.rows.vname;
                var arr = $('#arr');
                var str1 = '';
                $.each(array, function (i, n) {
                    str1 += '<a data-value="66:295" href="javascript:void(0)" class="option sku-item" id="' + i + '" onclick="updateStore(this)" ><em></em></a>';
                    arr.append(str1);
                    $("#" + i).html(n);
                    str1 = '';
                });
            }
        });
    });
</script>
<script>
    function buyImmdiately() {
        param = new Object();
        param.pid = pid;
        param.buyNum = $('#buyNumber').val();
        param.kuid = kuid;
        param.tprice = tprice;
        param.price = price;

        console.log(param);
        if (typeof kuid == "undefined") {
            alert("请选择规格");
        }
        else {

            $.ajax('/order/payontItem', {
                type: 'post',
                datatype: 'json',
                contentType: 'application/json',
                data: JSON.stringify(param),
                success: function (data) {
                    window.location.href = 'payDetail.html';
                },
                fail: function (data) {
                    alert("立即购买失败");
                }
            });
        }

    }

    function updateStore(Obj) {
        var pid = getUrlParam("pid");
        // var pid = 1;
        // var pid = getUrlParam("pid");
        // console.log(a);
        // var pid = 1;
        var id = Obj.id;
        var i = $("#" + id).text();
        // console.log(i);
        $.ajax({
            type: "GET",
            data: {
                pid: pid,
                vname: i,
                aid: a
            },
            contentType: "application/json",
            url: "/product/getStoreByPidVnameAid",
            success: function (data) {
                // console.log(data.rows);
                $("#stock_num").html(data.rows.storenum);
                $("#buyNumber").attr("value", 1);
                kuid = data.rows.kuid;
                $("a").removeClass("curr");
                $(Obj).addClass("curr");
            }
        });
    }
</script>
<script>
    $('#addToCard').click(function (event) {
        if (uid != null) {
            $.ajax('/order/addToCart', {
                type: 'post',
                data: {
                    uid: uid,
                    pid: pid,
                    buyNum: $('#buyNumber').val(),
                    kuid: kuid,
                    tprice: tprice
                },
                success: function (data) {
                    console.log(panel);
                    panel.show(event);
                    flush_card_num();
                }
            });
        }
    });
</script>
<script>
    function addHeart() {
        var data = {};
        // data.pid =  getUrlParam("pid");
        data.pid = "1";
        data.pheart = $("#f1").text() * 1 + 1;
        console.info(data);
        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            contentType: "application/json",
            url: "/product/updateProduct",
            success: function (data) {
                console.log(data);
                //全局刷新
                window.location.reload();
                //局部刷新
                /*$('.like').remove();
                $('.like').load(URL + ' .like').fadeIn('slow');*/ // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的.like
            }
        });
    }

</script>
<script>
    function reduceNum() {
        var data = $("#buyNumber").val();
        if ((data * 1 - 1) < 1) {
            $("#buyNumber").attr("value", 1);
        } else {
            $("#buyNumber").attr("value", (data * 1 - 1));
        }
    }

    function plusNum() {
        var data = $("#buyNumber").val();
        var most = $("#stock_num").text();
        if ((data * 1 + 1) >= most) {
            $("#buyNumber").attr("value", most);
        } else {
            $("#buyNumber").attr("value", (data * 1 + 1));
        }
    }
</script>
</body>
</html>